<template>
  <!-- 工程专题专栏 -->
  <div class="list_title">工程专题</div>
  <div class="map_list">
    <div>
      <div class="img_map_box" @click="showMark">
        <img src="@/assets/images/YHGL.png" alt="" />
        <div class="map_active" v-show="SQ_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>排查专题</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showOpinion">
        <img src="@/assets/images/JCZT.png" alt="" />
        <div class="map_active" v-show="YJGL_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>测绘专题</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showMeasurement">
        <img src="@/assets/images/WXJL.png" alt="" />
        <div class="map_active" v-show="CL_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>检测专题</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showDraw">
        <img src="@/assets/images/XFGL.png" alt="" />
        <div class="map_active" v-show="HT_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>修复专题</div>
    </div>
  </div>
  <TroubleView v-model:dialogVisible="dialogVisible" @close="close" />
</template>

<script setup>
import {
  onMounted,
  ref,
  toRaw,
  defineComponent,
  reactive,
  watch,
  nextTick,
} from 'vue'
import {
  switchList5,
  switchList6,
  switchList7,
  switchList8,
  switchList11,
} from '@/store/index'
import TroubleView from '@/components/ZTT/TroubleView.vue'
// import TestView from '@/components/ZTT/TestView.vue'
// 控制排查测绘检测修复显隐
let storeRepair = switchList6()
let storeDetect = switchList7()
let storeCube = switchList8()
let storePC = switchList11()
const SQ_flag = ref(false)
const YJGL_flag = ref(false)
const CL_flag = ref(false)
const HT_flag = ref(false)
const dialogVisible = ref(false)
const close = () => {
  dialogVisible.value = false
  SQ_flag.value = false
}
watch(storeRepair, () => {
  if (toRaw(storeRepair.queryBtn) == false) {
    HT_flag.value = false
  }
})
watch(storeDetect, () => {
  if (toRaw(storeDetect.queryBtn) == false) {
    CL_flag.value = false
  }
})
watch(storeCube, () => {
  if (toRaw(storeCube.queryBtn) == false) {
    YJGL_flag.value = false
  }
})
/* 排查 */
const showMark = () => {
  SQ_flag.value = !SQ_flag.value
  if (SQ_flag.value == false) {
    storePC.queryBtn = false
  }
  // 打开排查表单
  dialogVisible.value = true
  YJGL_flag.value = false
  CL_flag.value = false
  HT_flag.value = false
}
/* 探测 */
const showOpinion = () => {
  storeCube.queryBtn = true
  SQ_flag.value = false
  YJGL_flag.value = !YJGL_flag.value
  if (YJGL_flag.value == false) {
    storeCube.queryBtn = false
  }
  CL_flag.value = false
  HT_flag.value = false
}
/* 检测 */
const showMeasurement = () => {
  storeDetect.queryBtn = true
  SQ_flag.value = false
  YJGL_flag.value = false
  CL_flag.value = !CL_flag.value
  if (CL_flag.value == false) {
    storeDetect.queryBtn = false
  }
  HT_flag.value = false
}
/* 修复 */
const showDraw = () => {
  storeRepair.queryBtn = true
  SQ_flag.value = false
  YJGL_flag.value = false
  CL_flag.value = false
  HT_flag.value = !HT_flag.value
  if (HT_flag.value == false) {
    storeRepair.queryBtn = false
  }
}
</script>

<style lang="less" scoped>
.map_list {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  text-align: center;
  width: 280px;
  .img_map_box {
    height: 56px;
    width: 60px;
    border: 1px solid #80eeff;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    .map_active {
      position: absolute;
      top: 39px;
      width: 58.4px;
      height: 16px;
      background-color: rgb(7, 247, 93);
      opacity: 0.85;
    }
    img {
      vertical-align: baseline;
    }
  }
  .img_map_box > img {
    width: 100%;
    height: 100%;
  }
}
.map_list > div {
  margin-top: 7px;
}
.list_title {
  height: 25px;
  border-bottom: 2px solid #72ed5c;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
</style>
